<template>
  <div class="flex-1 overflow-hidden d-flex">
    <div class="left-tab d-flex-c">
      <div
        :class="['left-tab-item d-flex-c ai-c jc-c c-pointer f-14', currentLeftTab === key ? 'active' : '']"
        v-for="(item, key) in leftTabs"
        :key="key"
        @click="clickLeftTab(key)"
      >
        <span class="text">{{ item }}</span>
        <span>{{ currentCount[key] }}/{{ leftTabsCount[key] }}</span>
      </div>
    </div>
    <Transfer
      :titles="['站点列表', '已选站点']"
      @change="(data) => currentChange(data, '1')"
      class="main-area"
      v-show="currentLeftTab === '1'"
      :city-data="cityData"
      meta-set="YSQJC_ST_STBPRP_B"
      method-code="ztt_getCZlist"
      main-id-key="STCD"
      :columns="columns"
      type="水库"
      @rowClick="(data) => fit(data, '1')"
      ref="transfer1"
      v-model="city"
      layer-id="station-1"
      v-on="$listeners"
    />
    <Transfer
      :titles="['站点列表', '已选站点']"
      @change="(data) => currentChange(data, '2')"
      class="main-area"
      v-show="currentLeftTab === '2'"
      :city-data="cityData"
      meta-set="YSQJC_ST_STBPRP_B"
      method-code="ztt_getCZlist"
      main-id-key="STCD"
      :columns="columns"
      type="水文(河道)"
      @rowClick="(data) => fit(data, '2')"
      ref="transfer2"
      v-model="city"
      layer-id="station-2"
      v-on="$listeners"
    />
    <Transfer
      :titles="['站点列表', '已选站点']"
      @change="(data) => currentChange(data, '3')"
      class="main-area"
      v-show="currentLeftTab === '3'"
      :city-data="cityData"
      meta-set="YSQJC_ST_STBPRP_B"
      method-code="ztt_getCZlist"
      main-id-key="STCD"
      :columns="columns"
      type="水位"
      @rowClick="(data) => fit(data, '3')"
      ref="transfer3"
      v-model="city"
      layer-id="station-3"
      v-on="$listeners"
    />
    <Transfer
      :titles="['站点列表', '已选站点']"
      @change="(data) => currentChange(data, '4')"
      class="main-area"
      v-show="currentLeftTab === '4'"
      :city-data="cityData"
      meta-set="YSQJC_ST_STBPRP_B"
      method-code="ztt_getCZlist"
      main-id-key="STCD"
      :columns="columns"
      type="闸坝"
      @rowClick="(data) => fit(data, '4')"
      ref="transfer4"
      v-model="city"
      layer-id="station-4"
      v-on="$listeners"
    />
    <Transfer
      :titles="['站点列表', '已选站点']"
      @change="(data) => currentChange(data, '5')"
      class="main-area"
      v-show="currentLeftTab === '5'"
      :city-data="cityData"
      meta-set="YSQJC_ST_STBPRP_B"
      method-code="ztt_getCZlist"
      main-id-key="STCD"
      :columns="columns"
      type="雨量"
      @rowClick="(data) => fit(data, '5')"
      ref="transfer5"
      v-model="city"
      layer-id="station-5"
      v-on="$listeners"
    />
    <Transfer
      :titles="['站点列表', '已选站点']"
      @change="(data) => currentChange(data, '6')"
      class="main-area"
      v-show="currentLeftTab === '6'"
      :city-data="cityData"
      meta-set="YSQJC_ST_STBPRP_B"
      method-code="ztt_getCZlist"
      main-id-key="STCD"
      :columns="columns"
      type="其他"
      @rowClick="(data) => fit(data, '6')"
      ref="transfer6"
      v-model="city"
      layer-id="station-6"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import Transfer from './transfer.vue'
import { mapState } from 'vuex'
export default {
  name: 'Station',
  components: {
    Transfer
  },
  data () {
    return {
      city: [],
      cityData: [],
      leftTabs: {
        1: '水库',
        2: '水文(河道)',
        3: '水位',
        4: '闸坝',
        5: '雨量',
        6: '其他'
      },
      leftTabsCount: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0
      },
      currentCount: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0
      },
      currentLeftTab: '1',
      columns: [
        { title: '站点名称', field: 'STNM' },
        { title: '站点编号', field: 'STCD', width: 85 }
      ]
    }
  },
  created () {
    this.initCityData()
    this.getStationCount()
    this.$root.$on('updateMapMaking', this.updateMapMaking)
    this.$root.$on('removeCurrentRow', this.removeCurrentRow)
  },
  computed: {
    ...mapState('map-making', ['stationLayer'])
  },
  beforeDestroy () {
    this.$root.$off('updateMapMaking', this.updateMapMaking)
    this.$root.$off('removeCurrentRow', this.removeCurrentRow)
  },
  methods: {
    updateMapMaking () {
      for (const key in this.stationLayer) {
        if (Object.hasOwnProperty.call(this.stationLayer, key)) {
          const element = this.stationLayer[key]
          this.$refs['transfer' + key].setTableData(element)
        }
      }
    },
    async initCityData () {
      const data = await this.$utils.dictionary.getOptionsByKey('YSQJC_JC_XZQ')
      function hander (id) {
        const arr = data.filter(item => item.fcode === id)
        if (!arr.length) return null
        return arr.map(item => ({
          label: item.label,
          value: item.value,
          children: hander(item.value)
        }))
      }
      this.cityData = hander('130000')
    },
    async getStationCount () {
      const data = await this.$request.post('/ysjc/ztt/czCount', {})
      if (data) {
        this.leftTabsCount['1'] = data.sknum
        this.leftTabsCount['2'] = data.swennum
        this.leftTabsCount['3'] = data.sweinum
        this.leftTabsCount['4'] = data.zbnum
        this.leftTabsCount['5'] = data.ylnum
        this.leftTabsCount['6'] = data.qtnum
      }
    },
    clickLeftTab (key) {
      this.currentLeftTab = key
      this.$nextTick(() => {
        this.$refs['transfer' + key].search()
      })
    },
    currentChange (data, key) {
      this.$emit('updateMapFeatures', {
        layerId: 'station-' + key,
        rows: data.map(item => ({
          id: item.STCD,
          coordinates: item.LGTD && item.LTTD ? [item.LGTD, item.LTTD] : null,
          text: item.STNM
        })),
        layerName: this.leftTabs[key]
      })
      this.currentCount[key] = data.length
      this.$store.commit('map-making/setStationLayer', Object.assign(this.stationLayer, { [key]: data }))
    },
    fit (row, key) {
      this.$emit('fit', row.STCD, 'station-' + key)
    },
    removeCurrentRow ({ id, layerId }) {
      if (layerId.startsWith('gc-')) return
      const key = layerId.split('-')[1]
      this.$refs['transfer' + key].removeRowById(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.left-tab {
  width: 104px;
  background: linear-gradient(0deg, #fff 0%, #f3f6f9 100%);
  border-right: 1px solid #e1e9f0;
  align-items: flex-end;
  padding-top: 17px;

  .left-tab-item {
    width: 92px;
    height: 60px;
    color: #6a6b7f;
    position: relative;

    &.active {
      background: #fff;
      border: 1px solid #e2eaf1;
      border-right: none;
      border-radius: 8px 0 0 8px;
      margin-right: -1px;

      &::before {
        content: "";
        width: 6px;
        height: 60px;
        background: linear-gradient(90deg, #0080ff 0%, #fff 100%);
        border-radius: 6px 0 0 6px;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    &:hover {
      > .text {
        color: #333;
      }
    }
  }
}

.main-area {
  padding: 0 16px;
}
</style>
